<template>
  <div>
    <el-card
        style="
        margin: 30px auto;
        font-weight: bold;
        font-size: 22px;
        text-align: center;
      "
    >
      商品库存
    </el-card>
    <div
        id="storeChart"
        style="width: 1200px; height: 500px; margin: auto"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "StoreChart",
  data() {
    return {
      categories: [],
      data: [],
    };
  },
  mounted() {
    const storeChart = echarts.init(document.getElementById("storeChart"));
    const option = {
      tooltip: {
        trigger: "item",
      },
      title: {
        text: "商品库存柱状图",
        x: "center",
      },
      xAxis: {
        type: "category",
        data: this.categories,
        axisLabel: {
          interval: 0, // 强制显示所有标签
          rotate: 45, // 标签旋转45度，防止重叠
        },
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: this.data,
          type: "bar",
        },
      ],
    };

    this.request.get("/api/income/store").then((res) => {
      if (res.code === "200") {
        this.categories = res.data.categories;
        this.data = res.data.data;
        option.xAxis.data = this.categories;
        option.series[0].data = this.data;
        storeChart.setOption(option);
      }
    });
  },
};
</script>
